<template>
    <div id="m">
        <div class="t">添加教师信息</div>
        <el-form ref="form" :model="teacher" label-width="80px">
        <el-form-item label="教师姓名">
            <el-input v-model="teacher.teacher_name"></el-input>
        </el-form-item>
        <el-form-item label="教师电话">
            <el-input v-model="teacher.teacher_phone"></el-input>
        </el-form-item>
        <el-form-item label="教师级别" style="position: relative;">
            <el-select v-model="rank_name" placeholder="请选择级别" style="position: absolute; right: 210px;" @change="getRankId()">
                <el-option v-for="r in rankNameData" :key="r" :label="r" :value="r"></el-option>
            </el-select>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="addStu" style="margin-top: 20px; margin-right: 60px;">添加</el-button>
            <el-button type="warning" @click="cancel">取消</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name:"AddTeacher",
        data() {
            return {
                teacher:{
                    teacher_name:"",
                    teacher_phone:"",
                    rank_id:"三级",
                },
                rank_name:"",
                rankNameData:[],
                rankData:[],
            }
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/teacher/getData',
                }).then(res=>{
                    this.rankData=res.data.data[0];
                    this.rankNameData=res.data.data[1];
                    console.log(this.rankData);
                    console.log(this.rankNameData);
                }).catch(err=>{
                    console.log(err);
                })
            },
            addStu() {
                this.$axios({
                    method:'post',
                    url:'http://localhost:8081/workbench/teacher/addTeacher',
                    data:this.teacher
                }).then(res=>{
                    this.cancel();
                    console.log(res.data);
                }).catch(err=>{
                    console.log(err);
                })
            },
            cancel() {
                this.$router.replace({
                    path:'/home/teacher/query', 
                })
            },
            getRankId() {
                for(var i=0; i<this.rankData.length; i++) {
                    if (this.rank_name==this.rankData[i].rank_name) {
                        this.teacher.rank_id=this.rankData[i].rank_id;
                    }
                }
            }
        }
    }
</script>

<style>
    #m {
        width: 700px;
        height: 500px;
        margin: 150px auto;
        border: 1px rgb(190, 190, 190) solid;
        border-radius: 20px;
        box-shadow: 10px 10px 5px rgba(205, 203, 203, 0.9);
    }
    .t {
        font-weight: 800;
        margin: 50px 0px;
        font-size: 30px;
    }
</style>